<template>
  <div class="SingleStationIndex">
    <div class="top">
      <div class="overview">
        <div class="tabs">
          <p :class="tabActive == 1 ? 'active' : ''" @click="tabActive = 1">概览数据</p>
          <p :class="tabActive == 2 ? 'active' : ''" @click="tabActive = 2">电站信息</p>
        </div>
        <div class="cont" v-if="tabActive == 1">
          <div class="item">
            <p class="label">储能实时有功功率</p>
            <p class="value">{{ overviewData.activePower }}<span class="unit"> kW</span></p>
          </div>
          <div class="item">
            <p class="label">电池堆 SOC</p>
            <p class="value">{{ overviewData.soc }}<span class="unit"> %</span></p>
          </div>
          <div class="item">
            <p class="label">储能总收益</p>
            <p class="value">{{ overviewData.totalEarnings }}<span class="unit"> 万元</span></p>
          </div>
          <div class="item">
            <p class="label">综合效率</p>
            <p class="value">{{ overviewData.efficiency }}<span class="unit"> %</span></p>
          </div>
          <div class="item">
            <p class="label">储能总充电量</p>
            <p class="value">{{ overviewData.totalCharge }}<span class="unit"> MWh</span></p>
          </div>
          <div class="item">
            <p class="label">储能总放电量</p>
            <p class="value">{{ overviewData.totalDischarge }}<span class="unit"> MWh</span></p>
          </div>
        </div>
        <div class="infoBox" v-else>
          <div class="item title">
            <p class="label">电站名称：</p>
            <p class="value">佛山明阳2号变（2500kVA)2322kWh26H</p>
          </div>
          <div class="item">
            <p class="label">电站位置：</p>
            <p class="value">广东省佛山市顺德区佛山市顺德明洋纺织印染有限公司（沙咀路厂区）</p>
          </div>
          <div class="item">
            <p class="label">投运时间：</p>
            <p class="value">2024-04-24</p>
          </div>
          <div class="item">
            <p class="label">装机功率：</p>
            <p class="value">1125kW</p>
          </div>
          <div class="item">
            <p class="label">装机容量：</p>
            <p class="value">2322kWh</p>
          </div>
          <img src="@/assets/images/monitor/station_pic.png" alt="" class="pic" />
        </div>
      </div>
      <div class="energy">
        <div class="common-title">
          <p class="line"></p>
          <p class="text">能量流转</p>
        </div>
        <div class="cont">
          <div class="module module1">
            <p>电网 | 实时功率：<span class="num">1450</span> kW</p>
          </div>
          <div class="module module2">
            <p>储能：<span class="status">放电</span></p>
            <p>实时功率：<span class="num">-1076.1</span> kW</p>
            <p>SOC:<span class="num">23.3</span> %</p>
            <p>可用电量：<span class="num">538.605</span> kWh</p>
          </div>
          <div class="module module3">
            <p>负载 | 实时功率：<span class="num">-</span> kW</p>
          </div>
        </div>
      </div>
      <div class="alarm">
        <div class="common-title">
          <p class="line"></p>
          <p class="text">告警状态</p>
        </div>
        <div class="cont">
          <el-table :data="alarmData" border>
            <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
            <el-table-column prop="communicationStatus1" label="通信状态1" align="center">
              <template #default="{ row }">
                <span v-if="row.communicationStatus1 == 0" style="color: #43B244;"><el-icon>
                    <CircleCheck />
                  </el-icon>正常</span>
                <span v-else style="color: #C21F30;"><el-icon>
                    <Warning />
                  </el-icon>异常</span>
              </template>
            </el-table-column>
            <el-table-column prop="communicationStatus2" label="通信状态2" align="center">
              <template #default="{ row }">
                <span v-if="row.communicationStatus2 == 0" style="color: #43B244;"><el-icon>
                    <CircleCheck />
                  </el-icon>正常</span>
                <span v-else style="color: #C21F30;"><el-icon>
                    <Warning />
                  </el-icon>异常</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="common-title">
        <p class="line"></p>
        <p class="text">实时运行</p>
      </div>
      <div class="cont">
        <ECharts :option="elQuanOptions" style="width: 100%; height: 100%;" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ECharts from '@/components/ECharts.vue';
const overviewData = ref({
  activePower: '2.1',
  soc: '100',
  totalEarnings: '25.01',
  efficiency: '85.98',
  totalCharge: '334.068',
  totalDischarge: '287.238'
})
const tabActive = ref(1)
const alarmData = ref([
  {
    name: '2# 空调',
    communicationStatus1: 0,
    communicationStatus2: 1,
  },
  {
    name: '1# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '3# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '4# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '5# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '6# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '7# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '8# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '9# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  },
  {
    name: '10# 空调',
    communicationStatus1: 0,
    communicationStatus2: 0,
  }
])

const elQuanOptions = ref({
  grid: {
    left: '2%',
    right: '2%',
    top: '10%',
    bottom: '15%'
  },
  legend: {
    data: ['电网功率', '负载功率', '储能功率', '光伏功率', 'SOC', '策略功率', '需量限制', '逆功率限制'],
    bottom: 20,
    right:20
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '01:20', '02:40', '04:00', '05:20', '06:40', '08:00', '09:20', '10:40', '12:00', '13:20', '14:40', '16:00', '17:20', '18:40', '20:00', '21:20', '22:40'],
    axisLabel: {
      color: '#1D2129'
    },
    axisLine: {
      lineStyle: {
        color: '#E5E6EA'
      }
    }
  },
  yAxis: [{
    type: 'value',
    name: '功率 / kW',
    nameTextStyle: {
      color: '#1D2129',
      fontSize: 14
    },
    nameGap: 20,
    axisLabel: {
      color: '#1D2129'
    },
    axisLine: {
      lineStyle: {
        color: '#E5E6EA'
      }
    }
  },
  {
    type: 'value',
    name: 'SOC / %',
    position: 'right',
    nameTextStyle: {
      color: '#1D2129',
      fontSize: 14
    },
    nameGap: 20,
    axisLabel: {
      color: '#1D2129'
    },
    axisLine: {
      lineStyle: {
        color: '#E5E6EA'
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#E5E6EA'
      }
    },
    min: 0,
    max: 100,
    splitLine: {
      show: false
    }
  }],
  series: [
    {
      name: '电网功率',
      type: 'line',
      data: [1200, 1150, 1300, 1400, 1500, 1600, 1450, 1350, 1250, 1300, 1400, 1500, 1600, 1550, 1500, 1400, 1300, 1200],
      itemStyle: {
        color: '#046AF9'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2
      }
    },
    {
      name: '负载功率',
      type: 'line',
      data: [900, 950, 1000, 1050, 1100, 1200, 1250, 1300, 1200, 1150, 1100, 1050, 1000, 950, 900, 850, 800, 750],
      itemStyle: {
        color: '#43B244'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2
      }
    },
    {
      name: '储能功率',
      type: 'line',
      data: [-200, -150, -50, 100, 200, 250, 300, 250, 200, 150, 100, 50, 0, -50, -100, -150, -200, -250],
      itemStyle: {
        color: '#FC7930'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2
      }
    },
    {
      name: '光伏功率',
      type: 'line',
      data: [0, 0, 0, 50, 150, 300, 450, 600, 700, 750, 700, 650, 500, 350, 200, 50, 0, 0],
      itemStyle: {
        color: '#FFCE54'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2
      }
    },
    {
      name: 'SOC',
      type: 'line',
      yAxisIndex: 1,
      data: [80, 75, 70, 65, 60, 55, 50, 45, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85],
      itemStyle: {
        color: '#5D9CEC'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2
      }
    },
    {
      name: '策略功率',
      type: 'line',
      data: [500, 550, 600, 650, 700, 750, 800, 850, 900, 850, 800, 750, 700, 650, 600, 550, 500, 450],
      itemStyle: {
        color: '#AC92EC'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2
      }
    },
    {
      name: '需量限制',
      type: 'line',
      data: [1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500],
      itemStyle: {
        color: '#EC87C0'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2,
        type: 'dashed'
      }
    },
    {
      name: '逆功率限制',
      type: 'line',
      data: [-1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000, -1000],
      itemStyle: {
        color: '#ED5565'
      },
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        width: 2,
        type: 'dashed'
      }
    }
  ]
})
</script>

<style lang="scss" scoped>
.SingleStationIndex {
  .top {
    height: 5.04rem;
    display: flex;
    justify-content: space-between;

    .overview {
      width: 5rem;
      background: #fff;

      .tabs {
        height: 0.4rem;
        line-height: 0.4rem;
        display: flex;

        p {
          width: 50%;
          text-align: center;
          cursor: pointer;
        }

        .active {
          border-bottom: 2px solid #046AF9;
          background: linear-gradient(180deg, #FFFFFF 0%, #E6F0FE 100%);
        }
      }

      .cont {
        padding: 0.16rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border: 1px solid #F2F3F5;

        .item {
          width: 2.3rem;
          height: 1.36rem;
          margin-bottom: 0.08rem;
          background: #F7F8FA;
          text-align: center;
          padding-top: 0.36rem;

          .label {
            font-size: 0.12rem;
            color: #4D5969;
            margin-bottom: 0.08rem;
            line-height: 0.24rem;
          }

          .value {
            font-size: 0.3rem;
            color: #323D4B;
            font-weight: 700;
            line-height: 0.24rem;

            .unit {
              font-size: 0.16rem;
              color: #323D4B;
              font-weight: 700;
            }
          }
        }
      }

      .infoBox {
        border: 1px solid #F2F3F5;
        padding: 0.2rem 0.24rem;
        height: calc(100% - 0.4rem);

        .item {
          display: flex;
          font-size: 0.14rem;
          line-height: 0.24rem;
          color: #323D4B;

          .label {
            min-width: 80px;
          }
        }

        .title {
          font-size: 0.18rem;
          color: #022A64;
          font-weight: 500;
          margin-bottom: 0.08rem;
        }

        .pic {
          margin-top: 0.12rem;
          border-radius: 0.04rem;
        }
      }
    }

    .energy {
      width: 9rem;
      background: #fff;

      .cont {
        height: calc(100% - 0.4rem);
        background: #E6F0FE;
        background: url('@/assets/images/monitor/energy_bg.png') no-repeat center center #E6F0FE;
        border: 1px solid #F2F3F5;
        position: relative;
      }

      .module {
        padding: 0.08rem 0.12rem;
        background: #B5CEFF80;
        border-radius: 0.04rem;
        width: fit-content;
        font-size: 0.12rem;
        line-height: 0.2rem;
        position: absolute;

        .num {
          color: #43B244;
        }

        .status {
          color: #FC7930;
        }
      }

      .module1 {
        top: 0.18rem;
        right: 0.18rem;
      }

      .module2 {
        bottom: 0.18rem;
        left: 0.18rem;
      }

      .module3 {
        bottom: 0.18rem;
        right: 0.18rem;
      }
    }

    .alarm {
      width: 5rem;
      background: #fff;

      .cont {
        border: 1px solid #F2F3F5;
        padding: 0.12rem 0.16rem;
        height: calc(100% - 0.4rem);

        .el-table {
          width: 100%;
        }
      }
    }
  }

  .bottom {
    height: 5rem;
    background: #fff;
    margin-top: 0.12rem;

    .cont {
      height: calc(100% - 0.4rem);
    }
  }
}
</style>